<template>
	<view class="content" style="height: 100%;">
		<view class="map_container page-section page-section-gap">
			<map v-if="showMap" class="map" :latitude="latitude" :longitude="longitude" scale="17" :markers="markers"
			 show-location="true" @markertap="markertap"></map>
			<view class="address-list" style="height: 40%;">
				<view class="serach-box">
					<input confirm-type="search" class="uni-input" @confirm="bindInput" v-model="AddressName" confirm-hold="true" type="text"
					 placeholder="搜索地点" />
				</view>
				<view style="background: #fff;overflow-y: scroll;position: relative;height: 100%;">
					<view class="address-list-box" @click="sendAddres(item)" v-for="(item, index) in markers_new" :key="item.id" style="">{{ item.callout.content }}</view>
				</view>
			</view>
		</view>
		<video-chat></video-chat>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				showMap: true,
				markers: [],
				markers_new: [],
				// mapState: false,
				addressList: [],
				poisdatas: [{}, {}, {}],
				title: 'map',
				latitude: 39.9,
				longitude: 116.4,
				SRC: '111111111111',
				tips: {},
				AddressName: '',
				AddressLocation: '',
				type: '0'
			};
		},
		computed: {
			...mapState(['videoModalShow']),
		},
		watch: {
			videoModalShow(nval) {
				this.showMap = nval ? false : true
			}
		},
		onLoad(options) {
			this.type = options.type;
		},
		onShow() {
			let that = this;
			that.getLocation();
			// uni.getLocation({
			// 	type: 'gcj02',
			// 	success: function(res) {
			// 		that.longitude = res.longitude;
			// 		that.latitude = res.latitude;
			// 		that.getLocation();
			// 	}
			// });
		},
		methods: {
			sendAddres(data) {
				if (this.type == '0') {
					uni.navigateTo({
						// this.latitude = option.latitude
						// this.longitude = option.longitude
						url: '/pages/tim/room?message=' + data.callout.content + '&latitude=' + data.latitude + "&longitude=" + data.longitude
					});
				} else {
					uni.navigateTo({
						url: '/pages/tim/group?message=' + data.callout.content + '&latitude=' + data.latitude + "&longitude=" + data.longitude
					});
				}
			},
			bindInput: function(e) {
				var that = this;
				var keywords = e.detail.value;
				var amapFile = require('../../gaodemap/amap-wx.js');
				var Addresscity = wx.getStorageSync('Addressl');
				var MyAmapFun = new amapFile.AMapWX({
					key: '9d89b15d574a50e454fdb58f56fa160e'
				});
				MyAmapFun.getInputtips({
					keywords: keywords,
					//city: Addresscity, //已使用机器当前位置编码 为优先搜索
					location: '',
					success: function(data) {
						// console.log(data)
						var markers_new = [];
						data.tips.forEach(function(item, index) {
							if (item.location.length > 0) {
								markers_new.push({
									id: item.id, //marker 序号
									width: 40, //marker 宽度
									height: 40, //marker 高度
									iconPath: '/static/images/myLocation.png', //marker 图标路径
									latitude: item.location.split(",")[1], //marker  纬度
									longitude: item.location.split(",")[0], //marker 经度
									callout: {
										padding: 4, //callout 文本边缘留白
										fontSize: 15, //callout  文字大小
										bgColor: '#fff', //callout 背景颜色
										color: '#222', //callout 文字颜色
										borderRadius: 5, //边框圆角
										display: 'BYCLICK', //callout 'BYCLICK':点击显示; 'ALWAYS':常显
										content: item.district + item.name //地理位置名称
									}
								});
							}
						});
						that.markers_new = markers_new;
					}
				});
			},

			markertap: function(e) {
				for (var i = 0; i < this.markers_new.length; i++) {
					if (JSON.stringify(e).substring(18, 20) == this.markers_new[i].id) {
						uni.showToast({
							title: this.poisdatas[i].name,
							mask: false,
							duration: 1500
						});
					}
				}
			},
			// 获取定位
			getLocation() {
				let that = this;
				var amapFile = require('../../gaodemap/amap-wx.js');
				var amapPlugin = new amapFile.AMapWX({
					key: '9d89b15d574a50e454fdb58f56fa160e'
				});
				uni.getLocation({
					// map组件默认为国测局坐标gcj02，调用 uni.getLocation返回结果传递给组件时，需指定 type 为 gcj02
					type: 'gcj02',
					geocode: true,
					success: ({
						longitude,
						latitude,
						address
					}) => {
						// 定位得到的经纬度
						// console.log('当前位置的经度：' + longitude);
						// console.log('当前位置的纬度：' + latitude);
						this.longitude = longitude;
						this.latitude = latitude;
						this.markers = [{
							longitude:this.longitude,
							latitude:this.latitude,
							iconPath: '/static/images/myLocation.png', //marker 图标路径
						}]
						// this.markers.push({
						// 	longitude,
						// 	latitude,
						// 	iconPath: '/static/images/myLocation.png', //marker 图标路径
						// })
					}
				});
				amapPlugin.getPoiAround({
					success: function(data) {
						// console.log('----------------');
						//成功回调
						that.markers_new = data.markers;
						that.poisdatas = data.poisData;
						var markers_new = [];
						that.markers_new.forEach(function(item, index) {
							if (index < 10) {
								markers_new.push({
									id: item.id, //marker 序号
									width: 40, //marker 宽度
									height: 40, //marker 高度
									iconPath: '/static/images/myLocation.png', //marker 图标路径
									latitude: item.latitude, //marker  纬度
									longitude: item.longitude, //marker 经度

									callout: {
										padding: 4, //callout 文本边缘留白
										fontSize: 15, //callout  文字大小
										bgColor: '#fff', //callout 背景颜色
										color: '#222', //callout 文字颜色
										borderRadius: 5, //边框圆角
										display: 'BYCLICK', //callout 'BYCLICK':点击显示; 'ALWAYS':常显
										content: that.poisdatas[index].name //地理位置名称
									}
								});
							}
						});
						that.markers_new = markers_new;
						// console.log('markers', JSON.stringify(that.markers));
					},
					fail: function(info) {
						that.$utils.showLayer(info.errMsg);
						//失败回调
						// console.log('info', info);
					}
				});
			}
		}
	};
</script>
<style>
	.serach-box {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
	}

	.serach-box input {
		width: 90%;
		margin: 0 auto;
		margin-top: 10px;
		background: #dddddd;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border-radius: 12rpx;
	}

	.page-body {
		width: 100%;
		height: 100%;
	}

	.content {
		padding: 0;
	}

	.map_container {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.map {
		width: 100%;
		height: 60%;
	}

	.address-list-box {
		height: 40px;
		line-height: 40px;
		margin: 0 10px;
		border-bottom: 1px #ddd solid;
	}
</style>
<style lang="scss">
	@import '@/graceUI/graceUI.css';
</style>
